<template>
  <van-action-sheet v-model="isShow" title="发表回复" @closed="closedEvent">
    <div class="item">
      <img class="avatar" :src="item.aut_photo" alt="" />
      <div class="middle">
        <div class="name">{{ item.aut_name }}</div>
        <div class="content">{{ item.content }}</div>
        <div class="time">
          <span>{{ item.pubdate | formatDate }}</span>
        </div>
      </div>
    </div>
    <van-divider>回复列表</van-divider>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="load" >

      <div class="item" v-for="(i, index) in list" :key="index">
        <img class="avatar" :src="i.aut_photo" alt="" />
        <div class="middle">
          <div class="name">{{ i.aut_name }}</div>
          <div class="content">{{ i.content }}</div>
          <div class="time">
            <span>{{ i.pubdate | formatDate }}</span>
          </div>
        </div>
      </div>
    </van-list>
    <van-field placeholder="请输入评论内容" v-model.trim="content">
      <template #button>
        <van-button type="info" size="small" @click="submit">发布</van-button>
      </template>
    </van-field>
  </van-action-sheet>
</template>
<script>
import { comments, commentsPost } from '@/api/article'
export default {
  data () {
    return {
      isShow: false,
      item: '',
      loading: false,
      finished: false,
      list: [],
      offset: null,
      content: ''
    }
  },
  methods: {
    async load () {
      const res = await comments({
        type: 'c',
        source: this.item.com_id,
        offset: this.offset,
        limit: 10
      })
      this.list.push(...res.data.data.results)
      this.loading = false
      this.offset = res.data.data.last_id
      if (res.data.data.last_id === res.data.data.end_id) {
        this.finished = true
      }
    },
    closedEvent () {
      this.$emit('reset')
    },
    async submit () {
      if (this.content === '') {
        this.$toast.fail('请先输入内容')
        return
      }
      const res = await commentsPost({
        target: this.item.com_id,
        content: this.content,
        art_id: this.$route.query.id
      })
      this.content = ''
      this.$toast.success('回复评论成功')
      this.list.unshift(res.data.data.new_obj)
      this.item.reply_count++
    }
  }
}
</script>
<style lang="less" scoped>
.van-field {
  position: absolute;
  bottom: 0;
  width: 100%;
}
</style>
